<template>
	<view class="forgot-container">
		<!-- 顶部Logo和系统名称 -->
		<view class="header forgot-container-item">
			<image class="logo" src="/static/logo_2.0.jpg"></image>
			<text class="system-name">旭荣网盾(GDCS)</text>
		</view>
		
		<!-- 忘记密码表单卡片 -->
		<view class="forgot-card forgot-container-item">
			<view class="card-title">找回密码</view>
			<view class="card-subtitle">请输入您的邮箱地址，我们将发送验证码到您的邮箱</view>
			
			<!-- 邮箱输入框 -->
			<view class="input-group" :class="{ 'error': emailError }">
				<image class="input-icon" src="/static/Email.png"></image>
				<input 
					class="input-field" 
					type="text" 
					placeholder="请输入注册时使用的邮箱地址" 
					v-model="email"
					@blur="validateEmail"
				/>
			</view>
			<!-- 密码输入框 -->
			<view class="input-group" :class="{ 'error': passwordError }">
				<image class="input-icon" src="/static/Password.png"></image>
				<input 
					class="input-field" 
					:type="showPassword ? 'text' : 'password'" 
					placeholder="请设置密码（至少6位）" 
					v-model="password"
					@blur="validatePassword"
				/>
				<image 
					class="password-toggle" 
					:src="showPassword ? '/static/eye-open.png' : '/static/eye-close.png'"
					@click="togglePassword"
					v-if="password"
				/>
			</view>
			<!-- 验证码输入框 -->
			<view class="input-group" :class="{ 'error': verificationCodeError }">
				<image class="input-icon" src="/static/Notice.png"></image>
				<input 
					class="input-field" 
					type="text" 
					placeholder="请输入验证码" 
					v-model="verificationCode"
					@blur="validateVerificationCode"
				/>
				<button 
					class="send-code-btn" 
					:disabled="!canSendCode || isSendingCode" 
					@click="sendVerificationCode"
				>
					{{ isSendingCode ? '发送中...' : (countdown > 0 ? `${countdown}s后重试` : '发送验证码') }}
				</button>
			</view>
			<view class="error-text" v-if="emailError">{{ emailError }}</view>
			<view class="error-text" v-if="passwordError">{{ passwordError }}</view>
			<view class="error-text" v-if="verificationCodeError">{{ verificationCodeError }}</view>
			
			<!-- 发送重置按钮 -->
			<button class="send-btn" @click="handleSendReset" >
				重置
			</button>
			
			<!-- 返回登录链接 -->
			<view class="back-login">
				<text>想起密码了？</text>
				<text class="back-login-text" @click="goToLogin">返回登录</text>
			</view>
		</view>
		
		<!-- 发送成功提示模态框 -->
		<view class="modal" v-if="showSuccessModal" @click="closeSuccessModal">
			<view class="modal-content" @click.stop>
				<view class="modal-icon">✓</view>
				<view class="modal-title">密码重置成功</view>
				<view class="modal-message">
					您的密码已成功重置，请使用新密码登录。
				</view>
				<button class="modal-btn" @click="closeSuccessModal">确定</button>
			</view>
		</view>
		
		<!-- 错误提示模态框 -->
		<view class="modal" v-if="showErrorModal" @click="closeErrorModal">
			<view class="modal-content" @click.stop>
				<view class="modal-title">发送失败</view>
				<view class="modal-message">{{ errorMessage }}</view>
				<button class="modal-btn" @click="closeErrorModal">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { sendVerificationCode, changePassword } from '@/api/api.js';
	export default {
		data() {
			return {
				email: '',
				emailError: '',
				password: '',
				passwordError: '',
				verificationCode: '',
				verificationCodeError: '',
				showSuccessModal: false,
				showErrorModal: false,
				errorMessage: '',
				sending: false,
				isSendingCode: false,
				countdown: 0,
				countdownTimer: null,
				canSendCode: true,
				showPassword: false
			}
		},
		onLoad() {

		},
		methods: {
			handleSendReset() {
				// 清除之前的错误信息
				this.emailError = '';
				this.passwordError = '';
				this.verificationCodeError = '';
				
				// 验证邮箱
				if (!this.validateEmail()) {
					return;
				}
				
				// 验证密码
				if (!this.validatePassword()) {
					return;
				}
				
				// 验证验证码
				if (!this.validateVerificationCode()) {
					return;
				}
				
				// 开始发送
				this.sending = true;
				
				// 调用API修改密码
				changePassword(this.email, this.password, this.verificationCode)
					.then((res) => {
						if (res.success) {
							// 重置成功
							this.showSuccessModal = true;
						} else {
							this.showError(res.message || '密码重置失败，请稍后重试');
						}
					})
					.catch((error) => {
						this.showError(error.message || '密码重置失败，请检查网络连接');
					})
					.finally(() => {
						this.sending = false;
					});
			},
			
			// 发送验证码
			sendVerificationCode() {
				// 先验证邮箱
				if (!this.validateEmail()) {
					this.showError('请输入有效的邮箱地址');
					return;
				}
			
				this.isSendingCode = true;
				this.canSendCode = false;
				this.startCountdown();
				
				// 调用API发送验证码
				sendVerificationCode(this.email)
					.then((res) => {
						if (res.success) {
							uni.showToast({
								title: '验证码发送成功，请查收邮件',
								icon: 'success'
							});
						} else {
							this.showError(res.message || '验证码发送失败，请稍后重试');
						}
					})
					.catch((error) => {
						this.showError(error.message || '验证码发送失败，请检查网络连接');
					})
					.finally(() => {
						this.isSendingCode = false;
					});
			},
			
			validateEmail() {
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!this.email) {
					this.emailError = '请输入邮箱地址';
					return false;
				} else if (!emailRegex.test(this.email)) {
					this.emailError = '请输入有效的邮箱地址';
					return false;
				} else {
					this.emailError = '';
					return true;
				}
			},
			
			validatePassword() {
				if (!this.password) {
					this.passwordError = '请输入密码';
					return false;
				} else if (this.password.length < 6) {
					this.passwordError = '密码至少6位';
					return false;
				} else {
					this.passwordError = '';
					return true;
				}
			},
			
			validateVerificationCode() {
				if (!this.verificationCode) {
					this.verificationCodeError = '请输入验证码';
					return false;
				} else {
					this.verificationCodeError = '';
					return true;
				}
			},
			
			togglePassword() {
				this.showPassword = !this.showPassword;
			},
			
			// 开始倒计时
			startCountdown() {
				this.countdown = 60;
				if (this.countdownTimer) {
					clearInterval(this.countdownTimer);
				}
				this.countdownTimer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.countdownTimer);
					}
				}, 1000);
				this.verificationCode = '';
			},
			
			closeSuccessModal() {
				this.showSuccessModal = false;
				// 重置表单
				this.email = '';
				this.password = '';
				this.verificationCode = '';
				// 跳转到登录页面
				this.goToLogin();
			},
			
			closeErrorModal() {
				this.showErrorModal = false;
			},
			
			showError(message) {
				this.errorMessage = message;
				this.showErrorModal = true;
			},
			
			goToLogin() {
				uni.redirectTo({
					url: "/pages/login/login"
				});
			}
		}
	}
</script>

<style>
	.forgot-container {
			min-height: 100vh;
			background: url('/static/home.webp') center center / cover no-repeat;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 100rpx 60rpx;
			position: relative;
		}
	
		.forgot-container::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.4);
			z-index: 1;
		}
	
		.forgot-container-item {
			position: relative;
			z-index: 2;
		}
	
		.header {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 60rpx;
		}
	
		.logo {
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		}
	
		.system-name {
			font-size: 40rpx;
			font-weight: bold;
			color: #ffffff;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}
	
		.forgot-card {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 50rpx 40rpx;
			width: 100%;
			max-width: 600rpx;
			box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
		}
	
		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
			margin-bottom: 20rpx;
		}
	
		.card-subtitle {
			font-size: 24rpx;
			color: #666666;
			text-align: center;
			line-height: 1.5;
			margin-bottom: 40rpx;
		}
	
		.input-group {
			display: flex;
			align-items: center;
			background: #f8f9fa;
			border-radius: 12rpx;
			padding: 20rpx 24rpx;
			margin-bottom: 24rpx;
			border: 2rpx solid #e9ecef;
			transition: border-color 0.3s;
		}
		
		.input-group:focus-within {
			border-color: #667eea;
		}
		
		.input-group.error {
			border-color: #e74c3c;
		}
		
		.input-icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 16rpx;
			opacity: 0.6;
		}
		
		.input-field {
			flex: 1;
			font-size: 26rpx;
			color: #333333;
			background: transparent;
			border: none;
			outline: none;
		}
		
		.password-toggle {
			width: 24rpx;
			height: 24rpx;
			opacity: 0.6;
			margin-left: 16rpx;
		}
	
		.error-text {
			font-size: 22rpx;
			color: #e74c3c;
			margin-top: -20rpx;
			margin-bottom: 20rpx;
			margin-left: 8rpx;
		}
	
		.send-btn {
			width: 100%;
			height: 80rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: #ffffff;
			font-size: 30rpx;
			font-weight: bold;
			border: none;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
			transition: transform 0.2s;
		}
	
		.send-btn:disabled {
			background: #cccccc;
			box-shadow: none;
		}
	
		.send-btn:active:not(:disabled) {
			transform: translateY(2rpx);
		}
	
		.back-login {
			text-align: center;
			font-size: 24rpx;
			color: #666666;
		}
	
		.back-login-text {
			color: #667eea;
			text-decoration: underline;
			margin-left: 10rpx;
		}
	
		.modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;
		}
	
		.modal-content {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 40rpx;
			margin: 0 60rpx;
			max-width: 500rpx;
			text-align: center;
		}
	
		.modal-icon {
			width: 80rpx;
			height: 80rpx;
			background: #27ae60;
			color: #ffffff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			font-weight: bold;
			margin: 0 auto 20rpx;
		}
	
		.modal-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #27ae60;
			margin-bottom: 20rpx;
		}
	
		.modal-message {
			font-size: 24rpx;
			color: #666666;
			line-height: 1.6;
			margin-bottom: 30rpx;
		}
	
		.modal-btn {
			background: #667eea;
			color: #ffffff;
			border: none;
			border-radius: 8rpx;
			padding: 16rpx 40rpx;
			font-size: 26rpx;
		}
</style>
